<template>
  <div v-loading="loading">
    <el-main class="common-container">
      <el-tag type="warning">
        <i class="el-icon-warning" />
        启动页面是指用户进入小程序显示的等待页面，使用启动页面可以增加品牌曝光，但会导致用户进入小程序较慢
      </el-tag>
      <div class="content-container">
        <div class="left-container">
          <!-- 文本 -->
          <div v-if="form.splashScreen.type === 0" class="text-box">
            <div class="time">
              {{ $momentMini().format("YYYY-MM-DD HH:mm:ss") }}
            </div>
            <div class="title">{{ form.splashScreen.text }}</div>
            <div class="business-info flexRCC">
              <img v-if="userInfo.business.logoUrl" :src="fileBaseUrl + userInfo.business.logoUrl" class="logo" alt>
              <div class="name app-line-one">
                {{
                  userInfo.business.name ? userInfo.business.name : "商家简称"
                }}
              </div>
            </div>
          </div>
          <!-- 图片 -->
          <div v-if="form.splashScreen.type === 1 && form.splashScreen.img" class="img-box">
            <!-- <img :src="fileBaseUrl + form.splashScreen.img" alt /> -->
            <el-image :src="fileBaseUrl + form.splashScreen.img" />
          </div>

          <!-- 倒计时 -->
          <div class="count-down">
            <span class="pause"> {{ form.splashScreen.pause }}s</span>
            <span v-if="form.splashScreen.skip" class="skip"> 跳过</span>
          </div>
        </div>

        <div class="right-container">
          <div v-loading="loading" class="content">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
              <el-form-item label="启动页类型：" prop="splashScreen.type">
                <el-radio v-model="form.splashScreen.type" :label="0">文本</el-radio>
                <el-radio v-model="form.splashScreen.type" :label="1">图片</el-radio>
              </el-form-item>
              <el-form-item label="等待时间：" prop="splashScreen.pause">
                <el-input v-model="form.splashScreen.pause" placeholder="请输入" class="w-300" maxlength="2">
                  <template slot="append">秒</template>
                </el-input>
              </el-form-item>
              <el-form-item label="可跳过：" prop="splashScreen.skip">
                <el-switch v-model="form.splashScreen.skip" active-color="#13ce66" inactive-color="#ff4949" />
              </el-form-item>
              <el-form-item v-if="form.splashScreen.type === 0" label="文本：" prop="splashScreen.text">
                <el-input v-model.trim="form.splashScreen.text" type="textarea" maxlength="50" show-word-limit class="w-300" />
              </el-form-item>
              <el-form-item v-if="form.splashScreen.type === 1" label="上传图片：" prop="splashScreen.img">
                <el-upload :action="imgActionUrl" :show-file-list="false" :headers="{ 'X-BUSINESS-TOKEN': $store.state.user.token }" :on-success="uploadImageSuccess" :before-upload="beforeUploadImage">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    <div>只能上传jpg/png/gif文件，且不超过500KB</div>
                  </div>
                </el-upload>
              </el-form-item>

              <el-form-item>
                <el-button size="small" round type="primary" :disabled="loading" @click="submit">确 定</el-button>
                <el-button size="small" round @click="fetchData">重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import { imgUploadUrl } from '@/api/upload'
import { validateCustomPositiveInt } from '@/utils/validate'
import { getWxaConfig, editWxaConfig } from '@/views/wxaBuildModule/api/config'
import { mapGetters } from 'vuex'
export default {
  data() {
    // 校验方法
    // 秒数
    const validatorPause = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入数量'))
      } else if (!validateCustomPositiveInt(value, 2)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      // 校验字段
      rules: {
        'splashScreen.type': [
          {
            required: true,
            message: '请选择类型',
            trigger: ['blur', 'change']
          }
        ],
        'splashScreen.pause': [
          {
            required: true,
            validator: validatorPause,
            trigger: ['blur', 'change']
          }
        ],
        'splashScreen.skip': [
          {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change']
          }
        ],
        'splashScreen.text': [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        'splashScreen.img': [
          {
            required: true,
            message: '请上传图片',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      imgActionUrl: imgUploadUrl, // 上传地址
      // 状态
      loading: false,
      // 数据
      classifyCode: 'DEFAULT',
      form: {
        splashScreen: {
          img: '',
          pause: '',
          skip: true,
          text: '',
          type: 0
        }
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['userInfo', 'fileBaseUrl'])
  },

  created() {},
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
       * 数据组
       */
    // 获取数据
    fetchData() {
      const params = {
        classifyCode: this.classifyCode
      }
      this.loading = true
      getWxaConfig(params)
        .then((res) => {
          this.form = res.data
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 按钮组
       */
    // 图片上传
    uploadImageSuccess(res, file) {
      if (res.code === 0) {
        this.form.splashScreen.img = res.data.path
        this.$refs.form.clearValidate(['splashScreen.img'])
      } else {
        this.$message.error(res.msg)
      }
    },

    // 上传前处理
    beforeUploadImage(file) {
      return this.beforeUploadImg(file, this, 0, 0, 0.5, ['JPG', 'PNG', 'GIF'])
    },

    // 吧保存
    submit() {
      if (!this.form.id) return
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          const params = {
            classifyCode: this.classifyCode
          }
          const data = {
            id: this.form.id,
            splashScreen: this.form.splashScreen
          }
          editWxaConfig({ params, data })
            .then((res) => {
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
            })
            .catch((err) => {})
            .finally(() => {
              this.loading = false
            })
        }
      })
    }

    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 页面  */
  .common-container {
    margin-left: 20px;
    background-color: #fff;
    border-radius: 5px;
    .content-container {
      display: flex;
      margin-top: 20px;
    }
  }

  .left-container {
    width: 375px;
    height: 667px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    .count-down {
      position: absolute;
      top: 10px;
      right: 20px;
      height: 30px;
      padding: 0 10px;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      .skip {
        font-size: 14px;
      }
    }
    .text-box {
      padding-top: 200px;
      text-align: center;
      .time,
      .title {
        line-height: 2;
        color: #010101;
        font-size: 24px;
        font-family: xiaowei;
      }
      .title {
        word-wrap: break-word;
        padding: 0 30px;
      }
      .business-info {
        position: absolute;
        bottom: 50px;
        width: 100%;
        padding: 0 30px;
        .logo {
          width: 38px;
          height: 38px;
          margin-right: 12px;
          border-radius: 50%;
          border: 1px solid #e7e7e7;
        }
        .name {
          font-size: 16px;
          color: #999;
        }
      }
    }

    .img-box {
      vertical-align: baseline;
      width: 100%;
      height: 100%;
    }
  }

  .right-container {
    flex: 1;
    .w-300 {
      width: 300px;
    }
  }
</style>
